<template>
  <div class="case-detail-page">
    <!-- 背景图片 -->
    <div class="page_bg" :style="`background: url(${require('@/assets/images/indb.jpg')}) center top no-repeat;`"></div>
    
    <!-- 主要内容 -->
    <div class="container">
      <div class="row">
        <!-- 右侧主内容区域 -->
        <div class="col-xs-12 col-sm-8 col-md-9" style="float:right">
          <div class="detail_box" v-if="caseDetail">
            <!-- 返回按钮 -->
            <div class="mb-3">
              <router-link to="/adoption-cases" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> 返回列表
              </router-link>
            </div>
            
            <h2 class="left_h2">{{ caseDetail.name }}</h2>
            
            <div class="case_detail_content">
              <div class="row">
                <div class="col-md-6">
                  <div class="case_image">
                    <img 
                      :src="caseDetail.image" 
                      :alt="caseDetail.name"
                      class="img-responsive"
                      @error="handleImageError"
                    >
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="case_info">
                    <h3>基本信息</h3>
                    <table class="table table-bordered">
                      <tr>
                        <td class="info-label">姓名</td>
                        <td>{{ caseDetail.name }}</td>
                      </tr>
                      <tr>
                        <td class="info-label">状态</td>
                        <td>
                          <span class="status-badge" :class="getStatusClass(caseDetail.status)">
                            {{ caseDetail.status }}
                          </span>
                        </td>
                      </tr>
                      <tr>
                        <td class="info-label">领养人</td>
                        <td>{{ caseDetail.adopter }}</td>
                      </tr>
                      <tr>
                        <td class="info-label">领养日期</td>
                        <td>{{ formatFullDate(caseDetail.adoptDate) }}</td>
                      </tr>
                      <tr v-if="caseDetail.age">
                        <td class="info-label">年龄</td>
                        <td>{{ caseDetail.age }}</td>
                      </tr>
                      <tr v-if="caseDetail.breed">
                        <td class="info-label">品种</td>
                        <td>{{ caseDetail.breed }}</td>
                      </tr>
                      <tr v-if="caseDetail.gender">
                        <td class="info-label">性别</td>
                        <td>{{ caseDetail.gender }}</td>
                      </tr>
                    </table>
                  </div>
                </div>
              </div>
              
              <div class="case_story mt-4">
                <h3>领养故事</h3>
                <div class="story_content">
                  <p>{{ caseDetail.description }}</p>
                  <p v-if="caseDetail.story">{{ caseDetail.story }}</p>
                </div>
              </div>
              
              <!-- 相关照片 -->
              <div class="case_gallery mt-4" v-if="caseDetail.gallery && caseDetail.gallery.length">
                <h3>更多照片</h3>
                <div class="row">
                  <div 
                    v-for="(photo, index) in caseDetail.gallery" 
                    :key="index"
                    class="col-sm-4 col-md-3 mb-3"
                  >
                    <img 
                      :src="photo" 
                      :alt="`${caseDetail.name} 照片 ${index + 1}`"
                      class="gallery-img img-thumbnail"
                      @click="openLightbox(index)"
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 404 提示 -->
          <div v-else class="not-found">
            <div class="text-center">
              <h2>案例未找到</h2>
              <p>抱歉，您访问的领养案例不存在。</p>
              <router-link to="/adoption-cases" class="btn btn-primary">
                返回领养案例列表
              </router-link>
            </div>
          </div>
        </div>
        
        <!-- 左侧边栏 -->
        <div class="col-xs-12 col-sm-4 col-md-3">
          <!-- 导航菜单 -->
          <div class="left_nav">
            <h2 class="left_h2">领养案例</h2>
            <ul class="left_nav_ul">
              <li>
                <router-link to="/adoption-cases">所有案例</router-link>
              </li>
            </ul>
          </div>
          
          <!-- 相关案例 -->
          <div class="related_cases" v-if="relatedCases.length">
            <h2 class="left_h2">相关案例</h2>
            <ul class="related_list">
              <li v-for="relatedCase in relatedCases" :key="relatedCase.id">
                <router-link :to="`/adoption-cases/${relatedCase.id}`">
                  <img :src="relatedCase.image" :alt="relatedCase.name" class="related-thumb">
                  <span class="related-name">{{ relatedCase.name }}</span>
                </router-link>
              </li>
            </ul>
          </div>
          
          <!-- 联系我们 -->
          <div class="left_contact">
            <h2 class="left_h2">联系我们</h2>
            <p>如果您也想领养宠物，请联系我们：</p>
            <p>联系人：贫僧</p>
            <p>手机：暂无</p>
            <p>电话：暂无</p>
            <p>邮箱：暂无</p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 图片灯箱 -->
    <div 
      v-if="lightboxOpen" 
      class="lightbox-overlay" 
      @click="closeLightbox"
    >
      <div class="lightbox-content" @click.stop>
        <img 
          :src="caseDetail.gallery[currentImageIndex]" 
          :alt="`${caseDetail.name} 照片`"
          class="lightbox-img"
        >
        <button class="lightbox-close" @click="closeLightbox">&times;</button>
        <button 
          class="lightbox-prev" 
          @click="prevImage"
          v-if="caseDetail.gallery.length > 1"
        >
          ❮
        </button>
        <button 
          class="lightbox-next" 
          @click="nextImage"
          v-if="caseDetail.gallery.length > 1"
        >
          ❯
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CaseDetail',
  data() {
    return {
      caseDetail: null,
      relatedCases: [],
      lightboxOpen: false,
      currentImageIndex: 0,
      // 模拟数据库中的完整案例数据
      allCases: [
        {
          id: 1,
          name: 'coco的领养案例',
          image: require('@/assets/images/20230417/1681740318301726.jpg'),
          status: '已成功领养',
          adopter: '张女士',
          adoptDate: '2023-04-17',
          age: '2岁',
          breed: '金毛犬',
          gender: '母',
          description: 'coco是一只温顺可爱的小狗，现在已经找到了温暖的家庭。',
          story: 'coco在来到救助站时还很小，经过精心照料，现在已经成长为一只健康活泼的狗狗。张女士第一次见到coco就被它的温顺打动，现在它们已经成为最好的朋友。coco每天都会在门口等待主人回家，给家庭带来了无尽的欢乐。',
          gallery: [
            require('@/assets/images/20230423/1682256877856387.jpg'),
            require('@/assets/images/20230423/1682256826549167.jpg')
          ]
        },
        {
          id: 2,
          name: '小雪',
          image: require('@/assets/images/20230424/1682332942505948.jpg'),
          status: '已成功领养',
          adopter: '李先生',
          adoptDate: '2023-04-24',
          age: '1岁',
          breed: '萨摩耶',
          gender: '母',
          description: '小雪是一只聪明的白色小狗，很快就适应了新家庭。',
          story: '小雪因为主人搬家无法继续饲养而来到救助站。虽然离别让它有些难过，但在我们的悉心照料下，它很快恢复了活力。李先生一直想要一只白色的狗狗，小雪的出现正好满足了他的愿望。现在小雪每天都能在花园里自由奔跑，过着幸福的生活。',
          gallery: [
            require('@/assets/images/20230423/1682256770898273.jpg'),
            require('@/assets/images/20230423/1682256728449555.jpg')
          ]
        },
        {
          id: 3,
          name: '阿呆',
          image: require('@/assets/images/20230423/1682257069276480.jpg'),
          status: '已成功领养',
          adopter: '王女士',
          adoptDate: '2023-04-23',
          age: '3岁',
          breed: '中华田园犬',
          gender: '公',
          description: '阿呆虽然叫这个名字，但其实很聪明，现在过得很幸福。',
          story: '阿呆是在街头被发现的流浪狗，当时它又瘦又脏，但眼神中仍然充满着对人类的信任。经过几个月的治疗和照料，阿呆恢复了健康。王女士在看到阿呆的第一眼就被它的坚强所感动，决定给它一个温暖的家。现在阿呆已经成为王女士家中不可缺少的一员。',
          gallery: [
            require('@/assets/images/20230423/1682256597498996.jpg'),
            require('@/assets/images/20230423/1682256552216745.jpg')
          ]
        },
        {
          id: 4,
          name: '米奇',
          image: require('@/assets/images/20230423/1682257047659615.jpg'),
          status: '已成功领养',
          adopter: '陈先生',
          adoptDate: '2023-04-23',
          age: '1.5岁',
          breed: '柯基犬',
          gender: '公',
          description: '米奇是一只活泼的小狗，给新家庭带来了很多欢乐。',
          story: '米奇因为繁殖场关闭而需要寻找新家。它天性活泼，喜欢和人玩耍。陈先生有一个小儿子，一直希望有个小伙伴陪伴。米奇的到来让这个家庭更加热闹，小朋友和米奇成为了最好的玩伴，每天都能听到他们愉快的笑声。',
          gallery: [
            require('@/assets/images/20230423/1682256531398881.jpg'),
            require('@/assets/images/20230423/1682256503357127.jpg')
          ]
        }
      ]
    }
  },
  created() {
    this.loadCaseDetail()
  },
  watch: {
    '$route'() {
      this.loadCaseDetail()
    }
  },
  methods: {
    loadCaseDetail() {
      const id = parseInt(this.$route.params.id)
      this.caseDetail = this.allCases.find(c => c.id === id)
      
      if (this.caseDetail) {
        // 加载相关案例（除当前案例外的其他案例，最多3个）
        this.relatedCases = this.allCases
          .filter(c => c.id !== id)
          .slice(0, 3)
      }
    },
    
    formatFullDate(dateString) {
      const date = new Date(dateString)
      return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
      })
    },
    
    getStatusClass(status) {
      switch (status) {
        case '已成功领养':
          return 'status-adopted'
        case '待领养':
          return 'status-available'
        case '领养中':
          return 'status-pending'
        default:
          return ''
      }
    },
    
    handleImageError(event) {
      event.target.style.display = 'none'
      const parent = event.target.parentElement
      if (parent && !parent.querySelector('.pet-error-placeholder')) {
        const placeholder = document.createElement('div')
        placeholder.className = 'pet-error-placeholder'
        placeholder.style.cssText = 'width:100%;height:300px;background:#04A07B;color:white;display:flex;align-items:center;justify-content:center;border-radius:4px;font-size:14px;'
        placeholder.textContent = '🐾 图片加载失败'
        parent.appendChild(placeholder)
      }
    },
    
    // 灯箱功能
    openLightbox(index) {
      this.currentImageIndex = index
      this.lightboxOpen = true
      document.body.style.overflow = 'hidden'
    },
    
    closeLightbox() {
      this.lightboxOpen = false
      document.body.style.overflow = 'auto'
    },
    
    prevImage() {
      this.currentImageIndex = 
        (this.currentImageIndex - 1 + this.caseDetail.gallery.length) % this.caseDetail.gallery.length
    },
    
    nextImage() {
      this.currentImageIndex = 
        (this.currentImageIndex + 1) % this.caseDetail.gallery.length
    }
  }
}
</script>

<style scoped>
.case-detail-page {
  padding-top: 100px;
}

.page_bg {
  height: 200px;
  background-size: cover !important;
  background-position: center !important;
  margin-bottom: 30px;
}

.detail_box {
  background: white;
  padding: 30px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.left_h2 {
  color: #04A07B;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #04A07B;
}

.case_image img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 8px;
}

.case_info h3, .case_story h3, .case_gallery h3 {
  color: #333;
  font-size: 18px;
  margin-bottom: 15px;
}

.table {
  margin-bottom: 0;
}

.info-label {
  background: #f8f9fa;
  font-weight: bold;
  width: 30%;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.status-adopted {
  background: #d4edda;
  color: #155724;
}

.status-available {
  background: #d1ecf1;
  color: #0c5460;
}

.status-pending {
  background: #fff3cd;
  color: #856404;
}

.story_content {
  line-height: 1.6;
  color: #666;
}

.gallery-img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.gallery-img:hover {
  transform: scale(1.05);
}

/* 侧边栏样式 */
.left_nav, .related_cases, .left_contact {
  background: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.left_nav_ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.left_nav_ul li {
  border-bottom: 1px solid #eee;
}

.left_nav_ul a {
  display: block;
  padding: 10px 0;
  color: #333;
  text-decoration: none;
}

.left_nav_ul a:hover {
  color: #04A07B;
}

.related_list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.related_list li {
  margin-bottom: 15px;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

.related_list li:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.related_list a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #333;
}

.related_list a:hover {
  color: #04A07B;
}

.related-thumb {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 10px;
}

.related-name {
  flex: 1;
  font-size: 14px;
}

/* 灯箱样式 */
.lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}

.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.lightbox-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: white;
  font-size: 30px;
  cursor: pointer;
}

.lightbox-prev, .lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.2);
  border: none;
  color: white;
  font-size: 24px;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 4px;
}

.lightbox-prev {
  left: -60px;
}

.lightbox-next {
  right: -60px;
}

.lightbox-prev:hover, .lightbox-next:hover {
  background: rgba(255,255,255,0.4);
}

.not-found {
  background: white;
  padding: 50px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .col-xs-12.col-sm-8.col-md-9 {
    float: none !important;
    order: 2;
  }
  
  .col-xs-12.col-sm-4.col-md-3 {
    order: 1;
    margin-bottom: 20px;
  }
  
  .case-detail-page {
    padding-top: 80px;
  }
  
  .detail_box {
    padding: 20px;
  }
  
  .lightbox-prev {
    left: 10px;
  }
  
  .lightbox-next {
    right: 10px;
  }
}
</style>
